<template>
  <div class="nav">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="商品名称">
        <el-input placeholder="商品名称" v-model="searchParams.orderProductName"></el-input>
      </el-form-item>

      <el-form-item label="商品分类">
        <el-select placeholder="请选择" v-model="searchParams.typeId">
          <el-option
              v-for="(key,value) in typeList"
              :key="value"
              :label="key.typeName"
              :value="key.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品品牌">
        <el-select placeholder="请选择" v-model="searchParams.brandId">
          <el-option
              v-for="(key,value) in brandList"
              :key="value"
              :label="key.brandName"
              :value="key.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品颜色">
        <el-select placeholder="请选择" v-model="searchParams.colorId">
          <el-option
              v-for="(key,value) in colorList"
              :key="value"
              :label="key.colourName"
              :value="key.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="销售时间">
        <el-date-picker
            v-model="pickerOptions.startDate"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="chooseTime">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="product" >查询</el-button>
        <el-button type="warning" @click="resetForm()" >重置</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table
          :data="productInfoList"
          style="width: 100%"
          ref="multipleTable"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="orderProductName"
            label="商品名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="typeId"
            label="类型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="brandId"
            label="品牌"
            width="180">
        </el-table-column>
        <el-table-column
            prop="modelId"
            label="型号">
        </el-table-column>
        <el-table-column
            prop="colorId"
            label="颜色">
        </el-table-column>
        <el-table-column
            prop="sales"
            label="销量">
        </el-table-column>

      </el-table>
    </template>
    <div class="block">
      <el-pagination
          background
          layout="prev, pager, next"
          :total=total
          :current-page="this.searchParams.currentPage"
          :page-size="this.searchParams.pageSize"
          @current-change="currentPageChange"
          align="right">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import index from "./index"

export default index
</script>

<style>
@import "index.css";
</style>

